<template>
  <div class="warning-trend" ref="container"></div>
</template>
<script setup lang="ts">
import {onMounted} from "vue";
import {map, max, min} from "lodash";
import useEcharts from "../../utils/useCharts";

const {container, echarts, setOption} = useEcharts();

const generateOptions = (sources: any[][]) => {
  const minValue = map(sources, (source) => min(source));
  const maxValue = map(sources, (source) => max(source));

  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#2f2f48",
      borderColor: "#2f2f48",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      axisLabel: {
        color: "#9292c1",
        margin: 20,
      },
      data: ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
    },
    yAxis: {
      type: "value",
      // show: true,
      min: minValue,
      max: maxValue,
    },
    series: [
      // {
      //   name: "总量",
      //   type: "line",
      //   // symbol: "none",
      //   // smooth: true,
      //   animationDuration: 3000,
      //   animationEasing: "cubicInOut",
      //   itemStyle: {
      //     color: "#3264e7",
      //   },
      //   data: sources[0],
      // },
      {
        name: "光伏",
        type: "line",
        symbol: "none",
        smooth: true,
        animationDuration: 3000,
        animationEasing: "cubicInOut",
        itemStyle: {
          color: "#3c67fb",
        },
        data: sources[1],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#476bff" },
                  { offset: 1, color: "#fafafa" },
                ],
                false
            ),
          },
        },
      },
      {
        name: "风电",
        type: "line",
        symbol: "none",
        smooth: true,
        animationDuration: 3000,
        animationEasing: "cubicInOut",
        itemStyle: {
          color: "#ff7500",
        },
        data: sources[2],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#ff4400" },
                  { offset: 1, color: "#ffffff" },
                ],
                false
            ),
          },
        },
      },
    ],
  };
};

onMounted(() => {
  const sources = [
    [1645, 1549, 1933, 1063, 1436, 1847, 1263],
    [1464, 1485, 1405, 1852, 1091, 1659, 1923],
    [1485, 1485, 1852, 1091, 1659, 1923, 1852],
  ];
  // console.log('sources', sources)
  const options = generateOptions(sources);
  setOption(options);
});
</script>
<style lang="scss" scoped>
.warning-trend {
  width: 100%;
  height: 100%;
}
</style>